<!-- 我的积分 -->
<template>
	<view>
		<u-navbar :isFixed="true" title="我的积分" immersive :borderBottom="false" back-icon-color="#FFFFFF"
			title-color="#FFFFFF" :background="background"></u-navbar>
		<view class="wrap">
			<view class="num">{{integral}}</view>
			<view class="type">可用积分</view>
			<view class="card flex_bet_align">
				<navigator hover-class="none" url="integralRules" class="item">
					<image src="/static/img/guiz.png" mode="" class="topimg"></image>
					<view class="name">积分规则</view>
				</navigator>
				<navigator hover-class="none" url="integralGet?type=2" class="item">
					<image src="/static/img/mingx.png" mode="" class="topimg"></image>
					<view class="name">收入明细</view>
				</navigator>
				<navigator hover-class="none" url="integralGet?type=1" class="item">
					<image src="/static/img/zhic.png" mode="" class="topimg"></image>
					<view class="name">积分支出</view>
				</navigator>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="item in list">
				<view class="flex_bet">
					<view class="title">{{item.title}}</view>
					<view class="add">{{item.status==1?'-':'+'}}{{item.money}}</view>
				</view>
				<view class="num">订单编号：{{item.order_sn}}</view>
				<view class="time">{{item.createtime}}</view>
			</view>
		</view>
		<view class="not_more" v-if="list.length<1">
			<image src="../static/img/wdingdan.png" mode="widthFix"></image>
			<view class="text">暂无明细</view>
		</view>
		<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>
	</view>
</template>

<script>
	var _this, $paginator;
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#33B889'
				},
				list: [],
				nomore: false,
				integral: 0,
			}
		},
		onLoad(options) {
			_this = this
			_this.integral = options.integral
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		//监听页面滚动
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		//下拉刷新
		onPullDownRefresh() {
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		methods: {
			getdata: function(firstLoad = false) {
				$paginator.getData('idetailed', {
					type: "all",
				}, (data) => {
					if (firstLoad) {
						_this.list = data.list ? data.list : []
					} else {
						_this.list = _this.list.concat(data.list)
					}
					_this.nomore = data.nomore
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		font-family: PingFang SC;
	}

	.wrap {
		height: 520rpx;
		background-color: #33B889;
		position: relative;
		padding-top: 100rpx;

		.num {
			font-size: 67rpx;
			font-weight: 700;
			text-align: center;
			color: #fcdb77;
			padding-top: 100rpx;
		}

		.type {
			opacity: 0.41;
			font-size: 28rpx;
			font-weight: 500;
			text-align: center;
			color: #fcdc78;
		}

		.card {
			width: 685rpx;
			height: 180rpx;
			border-radius: 16rpx;
			background-color: #FFFFFF;
			position: absolute;
			bottom: -90rpx;
			left: 35rpx;
			box-shadow: 0rpx 10rpx 16rpx -4rpx #cccccc;

			.item {
				flex: 1;
				text-align: center;

				.iconfont {
					font-size: 60rpx;
				}

				.name {
					font-size: 28rpx;
					font-weight: 500;
					color: #242424;
				}

				.topimg {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}

	.list {
		padding: 125rpx 40rpx 0 48rpx;

		.item {
			padding: 38rpx 0 36rpx;
			border-bottom: 1rpx solid #EEEEEE;

			.title {
				font-size: 30rpx;
				font-weight: 500;
				color: #222222;
				flex: 1;
			}

			.add {
				font-size: 34rpx;
				font-weight: 700;
				color: #222222;
			}

			.num {
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;
				margin: 25rpx 0 22rpx;
			}

			.time {
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;
			}
		}
	}
</style>
